织梦cmsVue自定义全局弹窗组件操作
name: 'app',
新建一个弹窗的组件——popup.vue
align-items: center;
instance.show = true
z-index: 10;
click: ''
title: '我是标题',
方便以后自己使用，大家也可以参考哦，也希望大家多多支持，谢谢~~
width:23/75remx;
}
this.show = false
组件中使用方法
margin-top: 34/75rem;
import Popup from './components/dialog/popup'
.shadow{
.window{
width: 100%;
}
<script>
}
Vue.nextTick(() => {
imgUrl: '',
width: 270/75rem;
line-height:40/75rem;
</template>
},
export default Popup
data () {
}
}
.fade-leave-active {
opacity: 0;
}).$mount()
},
}
})
页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了
button{
<img @click="show = false" v-fb src="" alt="">
p{
<img :src="imgUrl" alt="">
btnClick () {
export default {
margin-top: 32/75rem;
.close{
this.$router.push('……')
width:60/75rem;
</script>
// 自定义全局弹窗组件popup.js文件
content: '',
import Vue from 'vue'background: #fff;
@import "../../../assets/css/pixel/pixel";
color:#f1300b;
}
.fade-leave-active {
background:#f95644;
btnText: '',
background:rgba(0,0,0,0.65);
content: '我是内容',
}
imgUrl: require('../../../static/images/shadow.png'), // 顶部图片
</style>
}
border-radius:10px;
弹窗组件
font-size:32/75rem;
height:64/75rem;
}
const PopupBox = Vue.extend(Popup)
}
color:#222222;
return {
margin-top: -90/75rem;
<transition>
main.js引入popup.js
show: false,
// show 和弹窗组件里的show对应，用于控制显隐
新建一个popup.js文件，写方法
flex-direction: column;
}
color:#ffffff;
line-height:32/75rem;
Vue.prototype.$popup = Popup.install
}
font-size:28/75rem;
methods: {
<template>click: () => {
this.$popup({
.fade-enter,
<p>{{content}}</p>
btnText: '我是按钮',
<h1>{{title}}</h1>
this.click()
}
效果图
Popup.install = function (data) {
transition: opacity .35s;
display: flex;
<style lang="less" scoped>
data
<div v-if="show" @touchmove.prevent>
created () {
border-radius:8px;
})
height:60/75rem;
padding: 75/75rem;
methods: {
font-size:28/75rem;
let instance = new PopupBox({
margin-top: 32/75rem;
document.body.appendChild(instance.$el)
</div>
@import "../../../assets/css/minx/minx";
title: '',
margin-top: 40/75rem;
import Vue from 'vue'
text-align: center;
}
// 渐变过渡
}
<div>
</div>
.fade-enter-active,
btnClick () {
.mask {
h1{
}
height: 400/75rem;
<button @click="btnClick">{{btnText}}</button>
justify-content: center;
font-weight: 600;
// 全局弹窗
<!-- 蒙版 -->
.fixed;
// 点击按钮事件
import Popup from './popup.vue'
</transition>
相关热词：
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jz/wp/5188.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
ludou_se_only); } add_action(s
时间：2021-01-23
-
所以经常导致输错密码的
时间：2021-01-23
-
WordPress措施打开速度慢的
时间：2021-01-22
-
WordPress回覆评论自动添加
时间：2021-01-22
-
我们可以通过下面的代码
时间：2021-01-22
-
如何修改WordPress默认脚色
时间：2021-01-20
-
同样的修改文件就行
时间：2021-01-20
-
少数善意的转载者既使没
时间：2021-01-20
热门文章
-
WordPress新手安装教程(图文)
时间：2020-12-28
-
在设置菜单中增加WordPress私密 隐藏的全部
时间：2021-01-10
-
WordPress博客程序常见错误的解决方法
时间：2020-12-28
-
WordPress程序打开速度慢的三种解决方法
时间：2021-01-10
-
wordpress使用代码在每篇文章尾部添加版权
时间：2020-12-14
-
WordPress博客措施常见错误的办理要领
时间：2021-01-15
-
关于WordPress的SEO优化相关的一些PHP页面脚
时间：2021-01-07
-
WordPress措施打开速度慢的三种办理要领
时间：2021-01-22
-
详解WordPress中的头像缓存和署理中的缓存
时间：2021-01-15
-
少数善意的转载者既使没有看到版权信息
时间：2021-01-20